<template>
  <div>
    <div style="height: 200px"></div>
    <div class="wrapper" id="wrapper">
      <div id="progress">
        <div id="progress-bar"></div>
      </div>
    </div>
    <div id="show">{{ num }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "0%",
      strp:0,// 步长
    };
  },
  mounted() {
    let that = this;
    const bar = document.getElementById("progress-bar");
    const progress = document.getElementById("progress");
    const line = document.getElementById("wrapper");
    let qidian = bar.offsetWidth / 2;
    bar.style.transform = `translateX(-${qidian}px)`; // 圆点中心为0
    // 点和进度条对齐
    let duiqi=line.offsetHeight;
    bar.style.bottom=`-${duiqi}px`
    // 获取进度条的宽度
    let boxWidth = line.offsetWidth;
    // 添加点击长条事件
    line.onmousedown = function (e) {
      let X = e.clientX - this.offsetLeft;
      bar.style.left = X + "px";
      progress.style.width = X + "px";
      if (X <= 0) {
        bar.style.left = 0;
      } else if (X >= boxWidth) {
        bar.style.left = boxWidth + "px";
      }
      // 点击进度条移动了多少
      let jiange = parseInt((parseInt(bar.style.left) / boxWidth) * 100) + "%";
      this.num = jiange;
    };
    // 设置点击滑块事件
    bar.onmousedown = function (e) {
      // 解决偏移量
      let progressLeft = e.clientX - this.offsetLeft;
      // 设置滑动滑块事件
      document.onmousemove = function (e) {
        let progressVal = e.clientX - progressLeft;
        bar.style.left = e.clientX - progressLeft + "px";
        if (progressVal <= 0) {
          bar.style.left = 0;
        } else if (progressVal >= boxWidth) {
          bar.style.left = boxWidth + "px";
        }
        progress.style.width = bar.style.left;
        that.num = parseInt((parseInt(bar.style.left) / boxWidth) * 100) + "%";
      };
      document.onmouseup = function () {
        //移除移动事件
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false;
    };

    
  },
  watch: {
    num(newValue, oldValue) {
      this.$emit('ceshi',newValue)
    }
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
/* 设置进度条容器 */
.wrapper {
  width: 800px;
  height: 6px;
  margin-bottom: 0;
  line-height: 6px;
  position: relative;
  background-color: #e3e3e3;
}
/* 设置进度条显示颜色 */
#progress {
  width: 0;
  height: 100%;
  background-color: red;
}
/* 设置进度条右侧圆点 */
#progress-bar {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: #000000;
  cursor: pointer;
}
</style>